<template>
    <div>
        <NSpace v-for="(item, index) in files" :key="index">
            <NUpload :fileList="item.in" action="" :default-upload="false" multiple
                @update:file-list="(list) => { updateInFileList(index, 'in', list) }">
                <n-button>选择输入文件</n-button>
            </NUpload>
            <NUpload :fileList="item.out" action="" :default-upload="false" multiple
                @update:file-list="(list) => { updateInFileList(index, 'out', list) }">
                <n-button>选择输出文件</n-button>
            </NUpload>
        </NSpace>
        <NButton type="primary" @click="prev">
            上一步
        </NButton>
        <NButton type="primary" @click="addFileList">
            新增
        </NButton>
        <NButton type="primary" @click="submitForm">
            上传
        </NButton>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { problemApi } from "@/api";

const emit = defineEmits(["prev"]);
const prev = () => {
    emit("prev");
}

const files = ref<any>([{ in: [], out: [] }]);

const addFileList = () => {
    files.value.push({ in: [], out: [] });
}

const updateInFileList = (index, type, list) => {
    files.value[index][type] = list;
}

const submitForm = () => {
    const formData = new FormData();
    formData.append("problemId", '2');
    files.value.forEach((file, index) => {
        formData.append(`files[${index}].in`, file.in[0].file);
        formData.append(`files[${index}].out`, file.out[0].file);
    });

    problemApi.addFiles(formData).then((res) => {
        console.log(res);
    })
}


</script>

<style scoped lang="less"></style>